<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/center.css"/>
</head>
<body>

<!--start-->
<div class="techbook userCenter orderMine">
    <!--head-->
    <div class="head head_about">
        <div class="top">
            <div class="wrap">
                <div class="fl">51TechBook.com，为技术而生！</div>
                <div class="fr">
                    <p class="fl">Hi，<a href="" class="username">张三</a><a href="" class="logout">[退出]</a></p>

                    <div class="fr topMenu">
                        <dl>
                            <dt>
                                <a href="">我的订单</a>
                            </dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">个人中心</a>
                            </dt>
                            <dd>
                                <a href="">个人信息</a><a href="">安全中心</a><a href="">收货地址</a><a href="">等待添加</a>
                            </dd>
                        </dl>
                        <dl class="cart">
                            <dt><a href="">购物车<i>16</i></a></dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">我是商家</a>
                            </dt>
                            <dd>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">客户服务</a>
                            </dt>
                            <dd>
                                <a href="">消费服务</a>
                                <a href="">商家服务</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">更多</a>
                            </dt>
                            <dd>
                                <a href="">更多</a>
                                <a href="">更多</a>
                                <a href="">更多</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bot">
            <div class="wrap">
                <div class="left fl">
                    <a href="" class="logo"><img src="img/front/about_logo.jpg" alt=""></a>
                </div>
                <div class="right fr">
                    <ul class="commitmentList"></ul>

                </div>
            </div>
        </div>

        <div class="nav">
            <div class="wrap">
                <div class="all_category_inner fl" id="all_category_inner"><div>全部图书分类</div></div>
                <div class="list fl">
                    <a href="">首页</a><a href="">预售</a><a href="">荐书</a>
                </div>
                <div class="fr free"><a href="">我要免费开店</a></div>
            </div>
        </div>

        <div class="menu wrap">
            <div class="list dn" id="menuList4inner">
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="">编程与开发</a><i>/</i><a href="">操作系统</a></dt>
                    <dd>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                        <dl class="sub">
                            <dt><a href="">更多&gt;&gt;</a><i></i><b>编程与开发</b></dt>
                            <dd>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a><i>/</i>
                                <a href="">安全与加密</a>
                            </dd>
                        </dl>
                    </dd>
                </dl>
            </div>
        </div>

    </div>
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">
            <div class="side fl">

                <h2 class="sideTitle bgWhite">中心首页</h2>

                <div class="userMenu bgWhite">
                    <dl>
                        <dt>我的交易</dt>
                        <dd><a href="">我的购物车</a></dd>
                        <dd><a href="">我的订单</a></dd>
                        <dd><a href="">评价晒单</a></dd>
                    </dl>
                    <dl>
                        <dt>我的收藏</dt>
                        <dd><a href="">商品收藏</a></dd>
                        <dd><a href="">浏览历史</a></dd>
                    </dl>

                    <dl>
                        <dt>客服服务</dt>
                        <dd><a href="">退款管理</a></dd>
                        <dd><a href="">举报管理</a></dd>
                    </dl>
                    <dl>
                        <dt>帐户设置</dt>
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">安全中心</a></dd>
                        <dd><a href="">收货地址</a></dd>
                    </dl>
                </div>

            </div>

            <div class="det bgWhite fr">
                <dl class="userCenterLayout userCenterLayout02 userCenterLayout03">
                    <dt><i class="fl"></i><b>我的订单</b></dt>
                    <dd>

                        <div class="tab orderMineTab">
                            <div class="tabs">
                                <ul class="list">
                                    <li class="tab tabCurr">
                                        <p>全部订单</p>
                                    </li>
                                    <i></i>
                                    <li class="tab">
                                        <p>待付款<em>3</em></p>
                                    </li>
                                    <i></i>
                                    <li class="tab">
                                        <p>待收货</p>
                                    </li>
                                    <i></i>
                                    <li class="tab">
                                        <p>待评价<em>3</em></p>
                                    </li>
                                </ul>
                                <div class="orderMineSearch"><input type="text" placeholder="请输入相关搜索内容" class="ipt"/><input type="button" value="" class="btn"/></div>
                            </div>
                            <div class="tabCons">
                                <div class="tabCon tabConCurr">
                                    <div class="info"></div>
                                    <dl class="goodsList">
                                        <div class="orderInfo">
                                            <span>订单编号：8751008508023</span><span>成交时间：2016-4-1 22:50:33</span><span>店铺：店名店名店名店名店名</span>
                                        </div>
                                        <table cellpadding="0" cellspacing="0" class="orderDescGoodsList">
                                            <thead>
                                            <tr>
                                                <th colspan="2" width="300">商品</th>
                                                <th width="100">单价</th>
                                                <th width="70">数量</th>
                                                <th width="140">金额</th>
                                                <th width="120">订单状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td width="120" class="brn"><a href=""><img src="img/example/book_170x170.jpg" alt=""/></a></td>
                                                <td width="180" class="bln brn tal"><a href="">书名书名书名书名书名书名书名书名书名书名书名书名书名书名</a></td>
                                                <td class="price bln brn">￥43.00</td>
                                                <td class="bln">3</td>
                                                <td rowspan="3" class="bgWhite black"><b>￥86.00</b><p>（含运费：0.00）</p></td>
                                                <td rowspan="3" class="bgWhite black">
                                                    <p class="wait">等待买家付款</p>
                                                    <p><a href="">订单详情</a></p>
                                                    <dl class="userLogistics">
                                                        <dt><span>包裹跟踪</span></dt>
                                                        <dd>

                                                            <i class="arrow"></i>
                                                            <div class="con">
                                                                <div class="title"><i class="closeBtn">×</i>物流配送</div>
                                                                <ul>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                </ul>
                                                                <p class="all"><a href="">查看全部物流 &gt;</a></p>
                                                            </div>

                                                        </dd>
                                                    </dl>
                                                </td>
                                                <td rowspan="3" class="bgWhite">
                                                    <span class="surplus">剩余24小时23分</span>
                                                    <a href="" class="pay">立即付款</a><br><a href="" class="black">取消订单</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="brn"><a href=""><img src="img/example/book_170x170.jpg" alt=""/></a></td>
                                                <td class="bln brn tal"><a href="">书名书名书名书名书名书名书名书名书名书名书名书名书名书名</a></td>
                                                <td class="price bln brn">￥43.00</td>
                                                <td class="bln">3</td>
                                            </tr>
                                            <tr>
                                                <td class="brn"><a href=""><img src="img/example/book_170x170.jpg" alt=""/></a></td>
                                                <td class="bln brn tal"><a href="">书名书名书名书名书名书名书名书名书名书名书名书名书名书名</a></td>
                                                <td class="price bln brn">￥43.00</td>
                                                <td class="bln">3</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </dl>


                                    <div class="info"></div>
                                    <dl class="goodsList">
                                        <div class="orderInfo">
                                            <span>订单编号：8751008508023</span><span>成交时间：2016-4-1 22:50:33</span><span>店铺：店名店名店名店名店名</span>
                                        </div>
                                        <table cellpadding="0" cellspacing="0" class="orderDescGoodsList">
                                            <thead>
                                            <tr>
                                                <th colspan="2" width="300">商品</th>
                                                <th width="100">单价</th>
                                                <th width="70">数量</th>
                                                <th width="140">金额</th>
                                                <th width="120">订单状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td width="120" class="brn"><a href=""><img src="img/example/book_170x170.jpg" alt=""/></a></td>
                                                <td width="180" class="bln brn tal"><a href="">书名书名书名书名书名书名书名书名书名书名书名书名书名书名</a></td>
                                                <td class="price bln brn">￥43.00</td>
                                                <td class="bln">3</td>
                                                <td rowspan="3" class="bgWhite black"><b>￥86.00</b><p>（含运费：0.00）</p></td>
                                                <td rowspan="3" class="bgWhite black">
                                                    <p>等待买家付款</p>
                                                    <p><a href="">订单详情</a></p>
                                                    <dl class="userLogistics">
                                                        <dt><span>包裹跟踪</span></dt>
                                                        <dd>

                                                            <i class="arrow"></i>
                                                            <div class="con">
                                                                <div class="title"><i class="closeBtn">×</i>物流配送</div>
                                                                <ul>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                    <li>
                                                                        <p><b>·</b>2016-04-17 19:52:16</p>
                                                                        <div>您的发货清单【武汉物流】已打印，未到送货时间，预计2016-04-17作业</div>
                                                                    </li>
                                                                </ul>
                                                                <p class="all"><a href="">查看全部物流 &gt;</a></p>
                                                            </div>

                                                        </dd>
                                                    </dl>
                                                </td>
                                                <td rowspan="3" class="bgWhite"><a href="" class="black">再次购买</a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </dl>

                                    <div class="page">
                                        <div>
                                            <a class="prev disabled">上一页</a><a class="curr">1</a><a>2</a><span>...</span><a>3</a><a>4</a><a>5</a><a class="next">下一页</a>
                                        </div>
                                    </div>

                                </div>
                                <div class="tabCon">2</div>
                                <div class="tabCon">3</div>
                                <div class="tabCon">4</div>
                            </div>
                        </div>


                    </dd>
                </dl>
            </div>



            <div class="cb"></div>

        </div>
    </div>
    <!--body End-->

    <!--foot-->
    <div class="foot">
        <div class="copyright">
            <p class="wrap">Copyright&nbsp;&copy;&nbsp;2013-2018&nbsp;武汉创远达信息技术有限公司版权所有&emsp;鄂ICP备14008188-1号</p>
        </div>
    </div>
    <!--foot End-->

</div>
<!--End-->

</body>
<script src="script/jquery.js"></script>
<script src="script/plug.js"></script>
<script src="script/common.js"></script>
<script>
$(function(){
    //Tab
    $('.tab').tab();

    //跟踪列表
    ;(function(){
        var $list=$('.userLogistics');
        //切换
        $list.on('mouseenter','dt>span',function () {
            var $dl=$(this).closest('dl');
            if($dl.hasClass('open'))return;
            $dl.addClass('open');
        });

        //关闭
        $list.on('mouseleave', function () {
           $(this).removeClass('open');
        });
        $list.on('click','.closeBtn', function () {
            $(this).closest('dl').removeClass('open');
        });
    })();
});
</script>
</html>